<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>材料页面</title>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<link rel="stylesheet" media="screen" href="../../../res/wzw/css/styles2.css" />
<style type="text/css">
	#one{
		border: 1px solid #dde7f7;
		width: 21%;
		height:80%;
		position:fixed;
		left: 3px;
	}
	
	#two{
		border: 1px solid #dde7f7;
		width: 76%;
		height:80%;
		position: relative;
		left: 22%;
	}
</style>
</head>
<body>
<div id="one">
	<div class="panel">
		<ul id="uu">
	
		</ul>
	</div>
</div>
<div id="two">
	<div class="demoTable">
	  搜索:
	  <div class="layui-inline">
	    <input class="layui-input" name="matName" id="matName" autocomplete="off" placeholder="输入材料关键字">
	  </div>
	  <div class="layui-inline layui-form">
			<select name="matTypeId" id="matTypeId"
				autocomplete="off" class="layui-input">
				<option></option>
			</select>
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	  <button class="layui-btn" id="pobAdd" data-type="add">加入采购</button>
	</div>
	<table class="layui-hide" id="materials" lay-filter="demo"></table>
</div>
<script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../layui/layui.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/jquery.min.1.6.4.js"></script>
<script src="../../../res/wzw/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../../res/mln/getUrlParam.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/jquery.easing.1.3.js"></script>
<script>

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,form=layui.form
	  ,element = layui.element; //元素操作
	 
	  
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
	  
	  //执行一个 table 实例
	  table.render({
	     elem: '#materials'
	    ,url: getRootPath()+'materials/findAll.action' //数据接口
	    ,page: true //开启分页
	    ,method:'post'
	    ,cols: [[ //表头
	       {type:'checkbox', fixed: 'left'}
	      /* ,{field: 'matId', title: '材料ID', width:120, fixed: 'left'} */
	      ,{field: 'typeName', title: '材料类型', width:200}
	      ,{field: 'matName', title: '材料名称', width:200}
	      ,{field: 'matPrice', title: '材料价格', width:200}
	      ,{field: 'matState', title: '材料说明', width:250}
	      /* ,{field: 'time', title: '操作时间', width:200}
	      ,{field: 'isva', title: '是否有效', width:160} */
	    ]]
	  	,id: 'testReload'
  		,done: function(res){
  		    //如果是异步请求数据方式，res即为你接口返回的信息。
  		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
  		  	var p=document.getElementsByName("oo");
  			//alert(p.length);
  			//alert(res.data.length);
  			for(var i=0; i<p.length; i++){
  				//alert($(p[i]).attr('id'));
  				for(var j=0; j<res.data.length; j++){
  					if($(p[i]).attr('id')==res.data[j].matId){
  						//alert(123);
  						res.data[j]['LAY_CHECKED']='true';
  						var index= res.data[j]['LAY_TABLE_INDEX'];
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
  					}
  				} 
  			}
	  	 }
	  });
	  table.on('checkbox(demo)', function(obj){
		  // console.log(obj.checked); //当前是否选中状态
		  //var data = obj.data;
		  //alert(obj.type);
		  var checkStatus = table.checkStatus('testReload')
		  ,data = checkStatus.data;
		  //alert(JSON.stringify(data));
		   if(obj.type=="all"){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].matId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].matName+"</span><span class='tag_count' onclick='ss(\""+data[i].matId+"\")'>X</span></a></li>")
				}
			  
		  }else{
			 if(obj.checked){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].matId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].matName+"</span><span class='tag_count' onclick='ss(\""+data[i].matId+"\")'>X</span></a></li>")
				}
			 	
			 }else{
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].matId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].matName+"</span><span class='tag_count' onclick='ss(\""+data[i].matId+"\")'>X</span></a></li>")
				}
			 }
		  }
		  //var ss=console.log(obj.data); //选中行的相关数据
		  $('.tag').each(function(i) {
		    	setTimeout(function() {
		    		$('.tag:eq('+i+')').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 'easeInOutExpo'); 
		    	}, 250 * (i + 1))
		  });
		
		  $('.tag').hover(function() {
				$(this).stop().animate({ paddingRight: ($('.tag_count', this).outerWidth() - 5) }, 'easeInOutExpo');
		  }, function() {
				$(this).stop().animate({ paddingRight: 5 }, 'easeInOutExpo');
		  });
		  //console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
		  
	  });
	  //监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  });
	  
	  //条件查询
	  var $ = layui.$;
			  
	  $('.demoTable .layui-btn').on('click', function(){
		 var matName = $('#matName');
		 var typeId=$('#matTypeId');
		 //执行重载
	     table.reload('testReload', {
	       page: {
	         curr: 1 //重新从第 1 页开始
	       }
	       ,where: {
	    	   matName: matName.val(),
	    	   typeId:typeId.val()
	       }
	     });
	  });
	  $('#pobAdd').on('click', function(){
		  var p=document.getElementsByName("oo");
			//alert(p.length);
			var bb="";
			var temp="";
			for(var i=0; i<p.length; i++){
				var temp=$(p[i]).attr('id');
				//alert(temp);
				if(bb==""){
					bb=temp;
				}else{
					bb=bb+","+temp;
				}
			}
			//alert(bb);
			var poId=getUrlParam('poId');
			var url = "../../../poBreakdown/addOrDelete.action";
			var data={matIds:bb,poId:poId}
			$.post(url,data,function(mes){
				if(mes.num>0){
					layer.msg('下一步,采购数量', {
						  icon: 1,
						  time: 1000 //1秒关闭（如果不配置，默认是3秒）
						}, function(){
							window.location="purchaseOrderAdd.html?poId="+poId;
					});
				}
			},dataType="JSON");
	  }); 
	  var poId=getUrlParam('poId');
	  //alert(poId);
	  var url = "../../../poBreakdown/findMatIdByPoId.action";
	  var data={poId:poId}
	  $.post(url,data,function(mes){
		  for(var i=0;i<mes.length;i++){
			  $("#uu").append("<li name='oo' id="+mes[i].matId+"><a href='#' class='tag'><span class='tag_name'>"+mes[i].pobName+"</span><span class='tag_count' onclick='ss(\""+mes[i].matId+"\")'>X</span></a></li>")
		  }
		  //form表单重新渲染
		  $('.tag').each(function(i) {
	    	  setTimeout(function() {
	    		  $('.tag:eq('+i+')').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 'easeInOutExpo'); 
	    	  }, 250 * (i + 1))
	      });
	
		  $('.tag').hover(function() {
			  $(this).stop().animate({ paddingRight: ($('.tag_count', this).outerWidth() - 5) }, 'easeInOutExpo');
		  }, function() {
			  $(this).stop().animate({ paddingRight: 5 }, 'easeInOutExpo');
		  });
		  form.render();
	  },dataType="JSON");
  
  
  
	  var url = "../../../materialType/findAllType.action";
	  $.post(url,null,function(data){
		  for(var i=0;i<data.length;i++){
			  $("#matTypeId").append("<option value="+data[i].matTypeId+">"+data[i].matTypeName+"</option>");
		  }
		  //form表单重新渲染
		  form.render();
	  },dataType="JSON");
	  
	});
function ss(obj){
	$("#"+obj).remove();
	layui.table.reload("testReload");
}	  
</script>
</body>
</html>